<template>
	<view class="flex-col page">
		
		<view class="flex-col section_1" >
			<view class="flex-row group">
				<view class="flex-row">
					<image
						src="../../static/my/anq.png"
						class="image" />
					<text class="text">资质认证</text>
				</view>
				<view class="flex-row group_2">
					<image
						src="../../static/my/dao.png"
						class="image_1" />
					<text class="text_1">随叫随到</text>
				</view>
			</view>
			<view class="flex-row section_2" v-show="!loading">
				<image
					src="../../static/my/anm.png"
					class="image_2" />
				<text class="text_2">{{ name }}</text>
			</view>
			
		</view>
		<!-- <u-skeleton rows="10" :loading="" titleWidth='100%' rowsHeight='26'></u-skeleton> -->
		<view class="flex-col list">
			<view class="list-item justify-center" :key="i" v-for="(item, i) in productlList" @click="toPath(item)">
				<view class="left-section flex-col items-center" :style="{'backgroundImage': `url(${item.avatar})`}">
					<image
						v-show="item.new"
						src="../../static/my/tnew.png"
						class="image_3" />
					
					<!-- <view class="flex-col items-center text-wrapper" v-if="item.appointment_time !== '休息中'&&item.label_top">
						<text>{{item.label_top}}</text>
					</view> -->
					
					<view class="pos" v-if="item.appointment_time == '休息中'">
						休息中
					</view>
				</view>
				
				<view class="center-group flex-col">
					<view class="group_3 flex-row">
						<text class="text_4 text_5">{{ item.realname }}</text>
						<image
							src="../../static/my/auth.png"
							class="image_5" />
					</view>
					<view class="group_4 flex-row">
						<u-icon name="star-fill" v-for="(a,b) in parseInt(item.praise)" size="12" color="rgba(243, 151, 53, 1)"></u-icon>
						<text class="text_6">好评{{ item.praise }}</text>
					</view>
					<view class="group_5 flex-row">
						<view class="left-text-wrapper flex-col" v-if="item.label">
							<text class="text_8">{{ item.label }}</text>
						</view>
						<view class="right-text-wrapper flex-col items-center">
							<text>{{ item.practice }}年经验</text>
						</view>
					</view>
					<view class="group_6 flex-row">
						<image
							v-if="false"
							src=""
							class="image_11" />
						<text class="text_11 text_12" v-if="false">浅墨养生</text>
						<image
							src="../../static/my/pl.png"
							class="image_13" />
						<text class="text_13 text_14">{{ item.comment }}评论</text>
						<image
							src="../../static/my/dang.png"
							class="image_15" />
						<text class="text_15 text_16">{{ item.sales }}单</text>
					</view>
				</view>
				<view class="right-group flex-col" style="align-items:flex-end;">
					<view class="top-text-wrapper flex-col items-center">
						<text>{{ item.appointment_time === '休息中' ? '' : '可约' }}{{ item.appointment_time }}</text>
					</view>
					<text class="text_18">距离{{ item.distance }}km</text>
					<view class="bottom-text-wrapper flex-col items-center" :class="item.appointment_time == '休息中'? 'gayer':''">
						<text>立即预约</text>
					</view>
				</view>

			</view>
			<view class="list-item justify-center" v-if="shownone">
				<view>
					<image src="../../static/images/nodata.png" mode="widthFix" style="width: 200rpx;"></image>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				productlList: [],
				latitude:'',
				longitude:'',
				value: '',
				dataList: [],
				total: null,
				page: 1,
				name: '',
				shownone:false
			};
		},
		onReachBottom(){
			console.log(this.total)
			console.log(this.productlList.length )
			if( this.total == this.productlList.length ){
				return;
			}
			this.page++;
			this.init();
		},
		onLoad(options) {
			let { name } = options;
			if( name ){
				this.name = name;
			}
			let address = uni.getStorageSync('address_info');
			console.log("address")
			console.log(address)
			if(address){
				this.longitude = address.longitude;
				this.latitude = address.latitude;
				this.init();
			}else{
				uni.getLocation({
					altitude: false,
					geocode: true,
					type: 'gcj02',
					success: (res) => {
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						this.init();
					}
				})
			}
			
		},
		
		methods:{
			
			init(){
				let order_info = uni.getStorageSync('order_info');
				this.$http.post('api/technician/index',{
					lat: this.latitude,
					lng: this.longitude,
					realname: this.value,
					service_id: order_info.service_id,
					page: this.page
				}).then(res =>{
					console.log(res,'xxxx')
					let { list ,total } = res;
					list.length==0?this.shownone=true:false
					this.productlList.push(...list);
					this.total = total;
					this.loading = false;
					uni.hideLoading()
				}).catch(Error=>{
					uni.hideLoading()
				})
			},
			toPath(item){
				if( item.appointment_time == '休息中' ){
					uni.showToast({
						title:'该技师在休息中',
						icon:'none'
					})
					return
				}
				let order_info = uni.getStorageSync('order_info');
				order_info.technician_id = item.id;
				uni.setStorageSync('order_info',order_info);
				uni.navigateTo({
					url:`/pages/confirm_order/confirm_order?id=${item.id}`
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 10rpx;
		background-color: #f8f8f8;
		
		overflow-y: auto;

		.section_1 {
			padding: 50rpx 32rpx 206rpx;
			
			background-image: linear-gradient(180deg,
					rgb(49, 208, 129) 0%,
					rgb(49, 208, 129) 2.91%,
					rgb(36, 194, 116) 75.56%,
					rgb(248, 248, 248) 92.1%,
					rgb(248, 248, 248) 100%);

			.group {

				color: rgb(255, 255, 255);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				.group_2 {
					margin-left: 54rpx;

					.image_1 {
						margin-bottom: 4rpx;
						width: 28rpx;
						height: 34rpx;
					}

					.text_1 {
						margin-left: 14rpx;
					}
				}

				.image {
					width: 40rpx;
					height: 40rpx;
				}

				.text {
					margin-left: 8rpx;
				}
			}

			.section_2 {

				margin-top: 24rpx;
				padding: 10rpx 24rpx;
				color: rgb(24, 181, 103);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx 24rpx 0px 0px;

				.image_2 {
					width: 48rpx;
					height: 48rpx;
				}

				.text_2 {
					margin-left: 8rpx;
				}
			}
		}

		.list {


			margin-top: -206rpx;
			padding: 0 32rpx;
			position: relative;

			.list-item:last-of-type {
				border-radius:0px 0px 24rpx 24rpx ;
			}

			.list-item {

				padding: 34rpx 0 30rpx;
				padding-left: 10rpx;
				background-color: rgb(255, 255, 255);
				border-bottom: #F8F8F8 1px solid;

				.left-section {
					
					padding-top: 140rpx;
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					line-height: 34rpx;
					white-space: nowrap;
					border-radius: 50%;
					background-size: cover;
					background-repeat: no-repeat;
					width: 176rpx;
					height: 176rpx;
					position: relative;

					.image_3 {
						width: 80rpx;
						height: 32rpx;
						position: absolute;
						right: 0;
						top: 0;
					}

					.text-wrapper {
						padding-bottom: 4rpx;
						background-color: rgb(243, 151, 53);
						border-radius: 18rpx;
						width: 128rpx;
						position: relative;
					}
				}

				.center-group {
					margin-left: 16rpx;
					flex: 1;
					.group_3 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;

						.text_4 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
							white-space: nowrap;
						}

						.text_5 {
							color: initial;
							font-size: initial;
							font-weight: initial;
							line-height: initial;
							white-space: initial;
						}

						.image_5 {
							margin: 4rpx 0 4rpx 8rpx;
							width: 90rpx;
							height: 36rpx;
						}
					}

					.group_4 {
						margin-top: 6rpx;
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 28rpx;
						white-space: nowrap;

						.image_7 {
							width: 80rpx;
							height: 24rpx;
						}

						.image_9 {
							margin-left: 4rpx;
							width: 52rpx;
							height: 24rpx;
						}

						.text_6 {
							margin-left: 8rpx;
						}
					}

					.group_5 {
						margin-top: 14rpx;
						color: rgb(243, 151, 53);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;

						.left-text-wrapper {
							padding: 2rpx 0 4rpx;
							background-color: rgba(243, 151, 53, 0.16);
							border-radius: 8rpx;
							height: 40rpx;

							.text_8 {
								margin-left: 12rpx;
								margin-right: 10rpx;
							}
						}

						.right-text-wrapper {
							margin-left: 8rpx;
							padding: 2rpx 10rpx 4rpx;
							background-color: rgba(243, 151, 53, 0.16);
							border-radius: 8rpx;
							height: 40rpx;
						}
					}

					.group_6 {
						margin-top: 16rpx;
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 28rpx;
						white-space: nowrap;

						.image_11 {
							width: 24rpx;
							height: 24rpx;
						}

						.text_11 {
							margin-left: 4rpx;
						}

						.text_12 {
							margin-left: initial;
						}

						.image_13 {
							margin-left: 12rpx;
							width: 24rpx;
							height: 24rpx;
						}

						.text_13 {
							margin-left: 4rpx;
						}

						.text_14 {
							margin-left: initial;
						}

						.image_15 {
							margin-left: 12rpx;
							width: 24rpx;
							height: 24rpx;
						}

						.text_15 {
							margin-left: 6rpx;
						}

						.text_16 {
							margin-left: initial;
						}
					}
				}

				.right-group {
					margin-left: 10rpx;
					margin-right: 24rpx;
					.top-text-wrapper {
						padding: 4rpx 0 2rpx;
						color: rgb(24, 181, 103);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;
						background-image: linear-gradient(111.2deg,
								rgba(53, 219, 160, 0.12) 0%,
								rgba(53, 219, 160, 0.12) -13.77%,
								rgba(24, 181, 103, 0.12) 111.69%,
								rgba(24, 181, 103, 0.12) 100%);
						border-radius: 6rpx;
						padding:4rpx 10rpx;
					}
					
					.text_18 {
						margin-top: 10rpx;
						align-self: flex-end;
						color: rgb(153, 153, 153);
						font-size: 20rpx;
						line-height: 28rpx;
						white-space: nowrap;
					}

					.bottom-text-wrapper {
						margin-left: 8rpx;
						margin-top: 48rpx;
						padding: 8rpx 0 6rpx;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;
						background-image: linear-gradient(116.3deg,
								rgb(53, 219, 160) 0%,
								rgb(53, 219, 160) -13.77%,
								rgb(24, 181, 103) 111.69%,
								rgb(24, 181, 103) 100%);
						border-radius: 24rpx;
						width: 128rpx;
					}
					.gayer{
						background: rgba(228, 228, 228, 1);
					}
				}
			}
		}
	}
	.pos{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .36);
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 28rpx;
		border-radius: 50%;
	}
</style>
